{% load i18n %}
{% load static %}
{% load simpletags %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %} dir="rtl" {% endif %}>
  <head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{{ site_title }}-{% trans 'Log in' %}</title>
    {% if "SIMPLEUI_LOGIN_LOGO"|get_config %}
      <link rel="icon" href="{{ "SIMPLEUI_FAVICON_ICON"|get_config }}">
    {% else %}
      <link rel="icon" href="{% static '/admin/simpleui-x/img/favicon.png' %}">
    {% endif %}

    {% if "SIMPLEUI_STATIC_OFFLINE"|get_config %}
      <link rel="stylesheet" href="{% static '/admin/simpleui-x/elementui/theme-chalk/index.css' %}">
      <link rel="stylesheet" href="{% static '/admin/simpleui-x/fontawesome/css/all.min.css' %}">
    {% else %}
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.min.css">
    {% endif %}

    <link rel="stylesheet" href="{% static '/admin/simpleui-x/css/login.css' %}?_=2.1">
  </head>

<body class="bg">
  <div class="login-main">
    <div class="logo">
      {% if "SIMPLEUI_LOGIN_LOGO"|get_config %}
        <img src="{{ "SIMPLEUI_LOGIN_LOGO"|get_config }}" alt="full-logo">
      {% else %}
        <img src="{% static '/admin/simpleui-x/img/logo.png' %}" alt="full-logo">
      {% endif %}
    </div>
    <div class="login-form">
      {% block header %}
        <div class="header">{{ site_header }}</div>
      {% endblock %}

      {% block errors %}
        {% if form.non_field_errors %}
          {% for error in form.non_field_errors %}
            <el-alert title="{{ error }}" type="error"></el-alert>
          {% endfor %}
        {% endif %}
        {% if form.errors and not form.non_field_errors %}
          <p class="errornote">
            {% if form.errors.items|length == 1 %}
              <el-alert title="{% trans "Please correct the error below." %}" type="error" show-icon></el-alert>
            {% else %}
              <el-alert title="{% trans "Please correct the errors below." %}" type="error" show-icon></el-alert>
            {% endif %}
          </p>
          <el-alert title="{{ form.errors|striptags }}" type="error" show-icon></el-alert>
        {% endif %}
      {% endblock %}

      {% block form %}
        <form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">
          {% csrf_token %}
          <div class="simpleui-input-inline">
            <el-input prefix-icon="fas fa-user" v-model="username" name="username" placeholder="{% trans 'username' %}"></el-input>
          </div>
          <div class="simpleui-input-inline">
            <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password" @keyup.enter.native="login()" placeholder="{% trans 'password' %}" show-password></el-input>
          </div>
          <div class="simpleui-input-inline login-btn">
            <el-button :icon="loading?'el-icon-loading':''" @click="login()" type="primary">{% trans 'Log in' %}</el-button>
          </div>
          <input type="hidden" name="next" value="{{ next }}"/>
        </form>
      {% endblock %}
    </div>
  </div>

  {% if "SIMPLEUI_STATIC_OFFLINE"|get_config %}
    <script type="text/javascript" src="{% static '/admin/simpleui-x/js/vue.min.js' %}"></script>
    <script type="text/javascript" src="{% static '/admin/simpleui-x/elementui/index.js' %}"></script>
  {% else %}
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  {% endif %}

  <script type="text/javascript" src="{% static '/admin/simpleui-x/js/login.js' %}?_=2.3"></script>

  {% if 'SIMPLEUI_LOGIN_PARTICLES'|get_config != False %}
    <style type="text/css">
      #particles-js{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      }
    </style>
    <div id="particles-js"></div>
    <script type="text/javascript" src="{% static '/admin/simpleui-x/particles/particles.js' %}"></script>
    <script type="text/javascript" src="{% static '/admin/simpleui-x/particles/app.js' %}"></script>
  {% endif %}
</body>

</html>